#tag layout_block("css_page_level")
<link rel="stylesheet" type="text/css" href="${CONTEXT_PATH}/assets/global/plugins/select2/select2.css"/>
#end
#tag layout_block("js_page_level")
<script type="text/javascript" src="${CONTEXT_PATH}/assets/global/plugins/select2/select2.min.js"></script>
<script type="text/javascript"
        src="${CONTEXT_PATH}/assets/global/plugins/jquery-validation/js/jquery.validate.min.js"></script>
<script type="text/javascript"
        src="${CONTEXT_PATH}/assets/global/plugins/jquery-validation/js/additional-methods.min.js"></script>
<script src="${CONTEXT_PATH}/assets/global/plugins/bootstrap-growl/jquery.bootstrap-growl.min.js"></script>
<script src="${CONTEXT_PATH}/assets/global/plugins/bootbox/bootbox.min.js" type="text/javascript"></script>
#end

#tag layout_block("content")
<div class="row">
    <div class="col-md-12">
        <div class="portlet light bg-inverse">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject font-blue bold uppercase">${getMessage('net.mayee.alice.web.sys.role.role_info')}</span>
                    <span class="caption-helper"></span>
                </div>
                ${printRoleEditActions(role.uuid)}
            </div>
            <div class="portlet-body form">
                <!-- BEGIN FORM-->
                <form id="form_1" class="form-horizontal" modelAttribute="role">
                    <input type="hidden" value="${role.uuid}" name="uuid">

                    <div class="form-body">
                        <div class="alert alert-danger display-hide"
                             data-text="${getMessage('net.mayee.alice.alert.default_msg')}">
                            <button class="close" data-close="alert"></button>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.role.role_key')}<span
                                    class="required"> * </span>
                            </label>

                            <div class="col-md-6">
                                <div class="input-icon right">
                                    <i class="fa"></i>
                                    <input type="text" class="form-control" value="${role.roleKey}" id="roleKey"
                                           name="roleKey"
                                           placeholder="${getMessage('net.mayee.alice.web.sys.role.role_key.tip')}"/>
                                </div>
                                <span class="help-block"> ${getMessage('net.mayee.alice.web.sys.role.role_key.tip2')} </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.role.name')}<span
                                    class="required"> * </span>
                            </label>

                            <div class="col-md-6">
                                <div class="input-icon right">
                                    <i class="fa"></i>
                                    <input type="text" value="${role.name}" class="form-control" name="name"
                                           placeholder="${getMessage('net.mayee.alice.web.sys.role.name.tip')}"/>
                                </div>
                                <span class="help-block"> ${getMessage('net.mayee.alice.web.sys.role.name.tip2')} </span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-3">${getMessage('net.mayee.alice.web.sys.note')}</label>

                            <div class="col-md-6">
                                <div class="input-icon right">
                                    <textarea name="note" class="form-control" rows="3">${role.note}</textarea>
                                </div>
                                <span class="help-block"> ${getMessage('net.mayee.alice.web.sys.note.tip')} </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                #if(!isPermission("role:U"))
                                #set(disabledStr="disabled")
                                #end
                                <button type="submit" class="btn blue" ${disabledStr}><i class="fa fa-save"></i>
                                    ${getMessage('net.mayee.alice.btn.save')}
                                </button>
                                <button type="button" class="btn default"
                                        onclick="javascript:window.location.href='${CONTEXT_PATH}/sys/role/R'">
                                    ${getMessage('net.mayee.alice.btn.cancel')}
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <!-- END FORM-->
            </div>
        </div>
    </div>
</div>


#end

#tag layout_block("script")
<script>
    jQuery(document).ready(function () {
        var el = $('.portlet');
        var formObj = $('#form_1');
        var error = $('.alert-danger', formObj);

        var validator = formObj.validate({
            errorElement: 'span',
            errorClass: 'help-block help-block-error',
            focusInvalid: false,
            ignore: "",
            rules: {
                roleKey: {
                    required: true,
                    regex: /^([a-zA-Z0-9]{4,20})$/
                },
                name: {
                    minlength: 2,
                    maxlength: 20,
                    required: true
                }
            },

            invalidHandler: function (event, validator) {
                Alice.showDefaultFailAlert(error);
            },

            errorPlacement: function (error, element) {
                var icon = $(element).parent('.input-icon').children('i');
                icon.removeClass('fa-check').addClass("fa-warning");
                icon.attr("data-original-title", error.text()).tooltip({'container': 'body'});
            },

            highlight: function (element) {
                $(element)
                        .closest('.form-group').removeClass("has-success").addClass('has-error');
            },

            unhighlight: function (element) {
            },

            success: function (label, element) {
                var icon = $(element).parent('.input-icon').children('i');
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
                icon.removeClass("fa-warning").addClass("fa-check");
            },

            submitHandler: function (form) {
                error.hide();
                Metronic.blockUI({
                    target: el,
                    animate: true,
                    overlayColor: 'blue'
                });
                $.ajax({
                    type: "POST",
                    url: "${CONTEXT_PATH}/sys/role/ajax/U",
                    data: $('#form_1').serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        Metronic.unblockUI(el);
                        if (res.msgid == 'SSSS') {
                            Alice.showDefaultSuccessGrowl(res.msgdesc);
                        } else {
                            Alice.showDefaultWarningGrowl(res.msgdesc, 6000);
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        Metronic.unblockUI(el);
                        Alice.showDefaultWarningGrowl("${getMessage('net.mayee.alice.error.data_error')}");
                    }
                });
            }
        });

        $('#delBtn').click(function () {
            bootbox.dialog({
                message:"<div class=\"row\">" +
                            "<div class=\"col-md-12 margin-top-10\">" +
                                "${getMessage('net.mayee.alice.alert.delete_role')}" +
                            "</div>" +
                        "</div>" +
                        "<div class=\"row\">" +
                            "<div class=\"col-md-12\">" +
                                "<div class=\"alert alert-success no-margin margin-top-20 \">" +
                                    "${getMessage('net.mayee.alice.note.delete_role')}" +
                                "</div>" +
                            "</div>" +
                        "</div>",
                title: "${getMessage('net.mayee.alice.alert.title.delete_role')}",
                buttons: {
                    danger: {
                        label: "${getMessage('net.mayee.alice.btn.delete')}",
                        className: "red",
                        callback: function () {
                            Metronic.blockUI({
                                target: el,
                                animate: true,
                                overlayColor: 'red'
                            });
                            $.ajax({
                                type: "POST",
                                url: "${CONTEXT_PATH}/sys/role/ajax/D/${role.uuid}",
                                data: "",
                                dataType: "JSON",
                                success: function (res) {
                                    if (res.msgid == 'SSSS') {
                                        bootbox.alert("${getMessage('net.mayee.alice.alert.title.success')}", function () {
                                            window.location.href = "${CONTEXT_PATH}/sdm/sys/role/R";
                                        });
                                    } else {
                                        Metronic.unblockUI(el);
                                        Alice.showDefaultFailAlert(error, res);
                                    }
                                },
                                error: function (xhr, ajaxOptions, thrownError) {
                                    Metronic.unblockUI(el);
                                    Alice.showDefaultWarningGrowl("${getMessage('net.mayee.alice.error.data_error')}");
                                }
                            });
                        }
                    },
                    main: {
                        label: "${getMessage('net.mayee.alice.btn.cancel')}",
                        className: "default"
                    }
                }
            });
        });

    });
</script>
#end
#include ("/layout/layout_main.html")
